<template>
<transition name="fade">
  <div class="box">
    <header class="header recipe-header">
      <mt-header title="">
        <router-link to="/silk" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
      <div class="hundred-seach">
        <span class="iconfont icon-sousuo2"></span>
        <input type="text" name="hund-seach" placeholder="搜索更多育儿知识">
      </div>
    </header>
    <div class="content">
      <div class="hund-tips">
        <ul>
          <li>孕期</li>
          <li>0-1岁</li>
          <li>1-3岁</li>
          <li>3-6岁</li>
        </ul>
      </div>
      <div class="hund-banner">
        <img src="./../../assets/baike2.jpg" alt="">
      </div>

      <div class="hund-nav">
        <ul>
         <li @click="yunqian"><i class="iconfont icon-yunfu"></i><span>孕前准备</span></li>
          <li @click="inspect"><i class="iconfont icon-yiyuan1"></i><span>孕前检查</span></li>
          <li @click="inlife"><i class="iconfont icon-shenghuo1"></i><span>孕期生活</span></li>
          <li @click="after"><i class="iconfont icon-weibiaoti202-copy"></i><span>产后</span></li>
        </ul>
      </div>
      <!-- 推荐列表 -->
      <div class="hund-news">
        <ul>
          <li>
            <div class="hund_cont">
              <img src="./../../assets/baby4.jpg" alt="">
              <p>想要宝宝更聪明，这些益智食物可以多吃</p>
              <span>9999万人在读</span>
            </div>
          </li>
          <li>
            <div class="hund_cont">
              <img src="http://img0.imgtn.bdimg.com/it/u=2577022489,1269768065&fm=26&gp=0.jpg" alt="">
              <p>孕期多走动对宝宝有什么好处？</p>
              <span>199万人在读</span>
            </div>
          </li>
          <li v-for="(item, index) in silklist" :key="index">
            <div class="hund_cont">
              <img :src="item.imgurl" alt="">
              <p>{{item.info}}</p>
              <span>{{item.number}}人在读</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</transition>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'
import { Search } from 'mint-ui'
Vue.component(Search.name, Search)
export default {
  data () {
    return {
      silklist: []
    }
  },
  created () {
    // this.$axios.post('/daxun/ace/selectAceAll.do')
    // const qs = require('qs')
    axios.post('http://10.8.162.9:8081/ace/selectAceAll.do', {
      token: 'McjUBDjSAPiRmii/0a03pV+hf1QUDwYu0FD8RQH7Ao3rjFJwqmLYlkXfIhgZTawXiyZReSxV4j9oeFe60XQUjC6wiY+jPV2cz1R6O0lt+cQ0qqyDNpre3gA1dinsiLPt06OX2vC/h4XuRtQ3cQbg5vZDvkhG7redM0KiX4e9PJdSJyuVyla7ItV9jOHGvHRGHzr7pcJEgd8wmmO4uCamJw=='
    })
      .then((response) => {
        console.log(response.data)
        var data = response.data.list
        this.silklist = data
        console.log(this.silklist)
      })
      .catch(function (error) {
        console.log(error)
      })
  },
  methods: {
    yunqian () {
      this.$router.push('/yunqian')
    },
    inspect () {
      this.$router.push('/inspect')
    },
    inlife () {
      this.$router.push('/inlife')
    },
    after () {
      this.$router.push('/after')
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
  .recipe-header {
    position: relative;
    @include rect(100%, 0.5rem);
    line-height: 0.20rem;
    text-align: center;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
    font-family: Arial;
    border: 1px solid rgba(255, 255, 255, 0);
    .mint-header {
      background-color: rgba(249, 249, 249, 1);
      h1, .mint-header-button{
        color: rgba(100, 100, 100, 1);
        font-size: 0.14rem;
        .mintui-back {
          font-weight: 900
        }
      }
    }
    .hundred-seach {
      position: absolute;
      @include rect(2.8rem, 0.3rem);
      left: 0.55rem;
      top: 0.04rem;
      line-height: 0.3rem;
      border-radius: 0.08rem;
      background-color: rgba(242, 242, 242, 1);
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0);
      .icon-sousuo2 {
        float: left;
        margin-left:0.15rem;
        font-weight: 900;
        color: #000;
        font-size: 0.16rem;
      }
      input {
        float: left;
        border: none;
        width: 2rem;
        height: 0.3rem;
        margin-left: 0.1rem;
        text-indent: 0.1rem;
        background: none;
        font-size: 0.13rem;
      }
    }
  }
  .content {
    .hund-tips {
      @include rect(100%, 0.3rem);
      ul {
        @include flexbox();
        @include justify-content(space-around);
        line-height: 0.3rem;
        li {
          font-size: 0.14rem;
          color: rgba(102, 102, 102, 1)
        }
      }
    }
    .hund-banner {
      @include rect(3.1rem, 1.3rem);
      border-radius: 0.12rem;
      background-color: rgba(240, 240, 240, 1);
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0);
      margin-left: 0.33rem;
      img {
      @include rect(100%, 100%);
      border-radius: 0.12rem;
      }
    }
    // 导航图标区
    .hund-nav {
      @include rect(100%, 1rem);
      ul {
        @include rect(100%, 100%);
        @include flexbox();
        @include justify-content();
        @include align-items();
        li {
          @include flexbox();
          @include flex-direction(column);
          @include justify-content();
          @include align-items();
          color: #815353;
          margin: 0.1rem 0.16rem;
          i {
            @include rect(0.44rem, 0.44rem);
            line-height: 0.44rem;
            background-color: rgba(248, 248, 229, 0.884);
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0);
            border-radius: 50%;
          }
          .iconfont {
            font-size: 0.3rem;
          }
          .icon-yunfu {
            color: rgb(241, 138, 138);
          }
          .icon-yiyuan1 {
            color: #3FB6ED;
            font-size: 0.32rem;
            line-height: 0.4rem;
          }
          .icon-shenghuo1 {
            color: rgb(177, 204, 146);
          }
          .icon-weibiaoti202-copy {
            color: rgb(248, 159, 159);
          }
          span {
            display: inline-block;
            padding-top: 0.07rem;
            color: rgb(160, 109, 109);
            font-size: 14px;
            text-align: left;
            font-family: PingFangSC-regular;
          }
        }
      }
    }
    // 列表
    .hund-news {
      @include rect(100%, auto);
      ul {
        @include rect(100%, auto);
        @include flexbox();
        @include justify-content();
        @include align-items();
        @include flex-direction(column);
        li {
          margin-bottom: 0.18rem;
          @include rect(100%, 1.4rem);
          @include background-color(rgb(241, 241, 241));
          .hund_cont {
            @include rect(100%, 0.88rem);
            margin-top: 0.25rem;
            position: relative;
            img {
              @include rect(1.33rem, 0.88rem);
              @include margin(0 0.1rem);
              @include background-color(rgb(238, 132, 132));
              float: left;
            }
            p {
              float: left;
              margin-left: 0.02rem;
              font-size: 0.14rem;
              width: 2.14rem;
              height: auto;
              line-height: 0.22rem;
              color: rgba(70, 69, 69, 1);
              text-align: left;
              font-family: Arial;
              border: 1px solid rgba(255, 255, 255, 0);
            }
            span {
              width: 2.20rem;
              height: 0.21rem;
              line-height: 0.15rem;
              color: rgba(172, 170, 170, 1);
              font-size: 0.10rem;
              text-align: left;
              font-family: Arial;
              border: 1px solid rgba(255, 255, 255, 0);
              position: absolute;
              bottom: 0;
              left: 1.52rem;
            }
          }
        }
      }
    }
  }
</style>
